<script>
	import {
		app_getRecommandNovels,
		app_getFinishrank,
		app_getPraiserank,
		app_getPopularityrank,
		app_getTopscore,
		app_getBookgardensquare
	} from "@/api/home/index.js"
	import {
		getName
	} from "@/common/getNovelNameDict.js"
	export default {
		name: "classify-card",
		data() {
			return {
				bookGradenSquareList: [], //书荒系列数据
				rankRecommendList: [], //推荐排行榜数据
				rankFinishrankList: [], //推荐完结榜数据
				rankPraiserankList: [], //推荐口碑榜数据
				rankTopscoreList: [], //推荐高分榜数据
				rankPopularityrankList: [], //推荐人气榜数据
				currentRankIndex: 0,
				rankOffsetLeft: 0,
				duration: 500,
				banner: [{
					src: "https://img1.baidu.com/it/u=1083834287,344119547&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=309",
				}, {
					src: "https://img2.baidu.com/it/u=2881245921,4175357114&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
				}, {
					src: "https://img0.baidu.com/it/u=2174595347,3149152354&fm=253&fmt=auto&app=138&f=JPEG?w=1038&h=500",
				}, {
					src: "https://img2.baidu.com/it/u=2187984685,727239354&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
				}],
				curr: 0,
				rankList: [{
					title: "推荐榜",
					active: true
				}, {
					title: "完本榜",
					active: false
				}, {
					title: "口碑榜",
					active: false
				}, {
					title: "高分榜",
					active: false
				}, {
					title: "人气榜",
					active: false
				}],
			};
		},
		created() {
			this.handleListDataTo2(0)
			this.handleGardensquare()
		},
		methods: {
			getClassfiyName(val) {
				return getName(val)
			},
			showRankData(val) {
				switch (val) {
					case 1:
						return this.rankRecommendList
						break;
					case 2:
						return this.rankFinishrankList
						break;
					case 3:
						return this.rankPraiserankList
						break;
					case 4:
						return this.rankTopscoreList
						break;
					case 5:
						return this.rankPopularityrankList
						break;
					default:
						return []
						break;
				}
			},
			//书荒广场接口
			handleGardensquare(column = 3){
				app_getBookgardensquare().then((res)=>{
					let newArray = []
					let arrLength = Math.ceil(res.data.length / 3)
					for (let i = 0; i < arrLength; i++) {
						newArray.push(res.data.slice(i * column, (i + 1) * column))
					}
					this.bookGradenSquareList = newArray
				}).catch((err)=>{
					this.bookGradenSquareList=[]
				})
			},
			handleListDataTo2(rankType, column = 3) { //处理数据成二维数组,column一组几个数据
				switch (rankType) {
					case 0:
						app_getRecommandNovels().then((res) => {
							let newArray = []
							let arrLength = Math.ceil(res.data.length / 3)
							for (let i = 0; i < arrLength; i++) {
								newArray.push(res.data.slice(i * column, (i + 1) * column))
							}
							this.rankRecommendList = newArray
						}).catch((err) => {
							this.rankRecommendList = []
						})
						break;
					case 1:
						app_getFinishrank().then((res) => {
							let newArray = []
							let arrLength = Math.ceil(res.data.length / 3)
							for (let i = 0; i < arrLength; i++) {
								newArray.push(res.data.slice(i * column, (i + 1) * column))
							}
							this.rankFinishrankList = newArray
						}).catch((err) => {
							this.rankFinishrankList = []
						})
						break;
					case 2:
						app_getPraiserank().then((res) => {
							let newArray = []
							let arrLength = Math.ceil(res.data.length / 3)
							for (let i = 0; i < arrLength; i++) {
								newArray.push(res.data.slice(i * column, (i + 1) * column))
							}
							this.rankPraiserankList = newArray
						}).catch((err) => {
							this.rankPraiserankList = []
						})
						break;
					case 3:
						app_getTopscore().then((res) => {
							let newArray = []
							let arrLength = Math.ceil(res.data.length / 3)
							for (let i = 0; i < arrLength; i++) {
								newArray.push(res.data.slice(i * column, (i + 1) * column))
							}
							this.rankTopscoreList = newArray
						}).catch((err) => {
							this.rankTopscoreList = []
						})
						break;
					case 4:
						app_getPopularityrank().then((res) => {
							let newArray = []
							let arrLength = Math.ceil(res.data.length / 3)
							for (let i = 0; i < arrLength; i++) {
								newArray.push(res.data.slice(i * column, (i + 1) * column))
							}
							this.rankPopularityrankList = newArray
						}).catch((err) => {
							this.rankPopularityrankList = []
						})
						break;
					default:
						break;
				}
			},
			//点击小说去阅读
			handleToReadPage(data){
				uni.navigateTo({
					url:`/pages/txtNovelContent/txtNovelContent?novel_id=${data}`
				})
			},
			//点击某一个item
			chooseItem(item) {
				// 点击拿到整个当前点击的item 执行业务逻辑 
			},
			clickItem(val) {
				console.log(val)
			},
			showPopup() {
				uni.$emit('page-popup', { // 向 popup 传递消息
					imageUl: 'https://js.ibaotu.com/act/23/11/06/654844f72dfd2.jpg',
					videoUrl: 'http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4'
				});
				const subNVue = uni.getSubNVueById('popup'); // 通过 id 获取 nvue 子窗体 
				subNVue.show('slide-in-left', 250); // 打开 nvue 子窗体
			},
			handleMainWorks(item, index) {
				this.rankList.forEach((item, index) => {
					item.active = false
				})
				item.active = true
				this.currentRankIndex = index
				this.rankOffsetLeft = (index - 1) * 81
				switch (index) {
					case 0:
						if (this.rankRecommendList.length > 0) {
							return
						}
						this.rankRecommendList = []
						break;
					case 1:
						if (this.rankFinishrankList.length > 0) {
							return
						}
						this.rankFinishrankList = []
						break;
					case 2:
						if (this.rankPraiserankList.length > 0) {
							return
						}
						this.rankPraiserankList = []
						break;
					case 3:
						if (this.rankTopscoreList.length > 0) {
							return
						}
						this.rankTopscoreList = []
						break;
					case 4:
						if (this.rankPopularityrankList.length > 0) {
							return
						}
						this.rankPopularityrankList = []
						break;
					default:
						break;
				}
				this.handleListDataTo2(index)
			},
			touchmove(e) {
				this.show = false
			},
			longtap(e) {
				this.show = false
			},
			tap(e) {
				this.show = false
			},
			touchmove2(e) {
				// this.show = false
			},
			longtap2(e) {
				// this.show = false
			},
			tap2(e) {
				// this.show = false
			},
			handleMeun(e) {
				if (this.show) {
					this.show = false
				} else {
					this.show = true
				}
				// this.show = !this.show
			},
			handleMeunIndex(index) {
				this.currentIndex = index
				this.show = false
				this.list.forEach((item, index) => {
					item.show = false
				})
				this.list[this.currentIndex].show = true
			},
			imgError(e) {
				console.log(e)
			},
			//换一换
			changeAgin() {
				switch (this.currentRankIndex) {
					case 0:
						this.rankRecommendList = []
						break;
					case 1:
						this.rankFinishrankList = []
						break;
					case 2:
						this.rankPraiserankList = []
						break;
					case 3:
						this.rankTopscoreList = []
						break;
					case 4:
						this.rankPopularityrankList = []
						break;
					default:
						break;
				}
				this.handleListDataTo2(this.currentRankIndex)
			}
		}
	}
</script>
<template>
	<view class="contain2">
		<view class="recommend">
			限时免费推荐
		</view>
		<l-swiper type="card" :height="300" :banner="banner" v-model="curr" @clickItem="clickItem">
			<view class="freeBox" style="">
				<view class="freeBox_image">
					<image src="../../static/error.jpg" mode="scaleToFill"></image>
				</view>
				<view class="freeBox_info">
					<view class="freeBox_info_bookName">
						<text>书名:</text><text>啊哈哈胡大爷胡大爷胡大爷胡大爷胡大爷</text>
					</view>
					<view class="freeBox_info_author">
						<text>作者:</text><text>胡大爷胡大爷胡大爷胡大爷胡大爷</text>
					</view>
					<view class="freeBox_info_slogan">
						<text>#速度与激情的碰撞！快来抢购你的心仪之作！胡大爷胡大爷胡大爷胡大爷</text>
					</view>
					<view class="freeBox_info_price">
						<text>原价:$999</text><text>活动价:免费</text>
					</view>
					<view class="freeBox_info_expire">
						<text>即将恢复原价:12:00:01</text>
					</view>
				</view>
			</view>
		</l-swiper>
		<view class="tabs">
			<view class="tabs_rankList">
				<view class="tabs_rankList_nav">
					<text>排行榜</text>
					<view class="tabs_rankList_nav_update" @click="changeAgin">
						<text>换一换</text>
						<image src="/static/image/homeImage/homeRush.png" mode=""></image>
					</view>
				</view>
				<view class="tabs_rankList_box">
					<scroll-view class="tabs_rankList_box_scroll" scroll-x="true"
						:scroll-left="rankOffsetLeft">
						<view class="tabs_rankList_box_scroll_child" v-for="(item,index) in rankList">
							<view :class="{'tabs_rankList_box_scroll_child_meun':true,active:item.active}"
								@click.stop="handleMainWorks(item,index)">
								{{item.title}}
							</view>
						</view>
					</scroll-view>
				</view>
				<hbhSwiperComponent v-for="item in 5" :key="item" v-show="item==currentRankIndex+1"
					nextMargin="200rpx" height="540rpx" listHeight="150rpx" :listData="showRankData(item)">
					<template v-slot:default="{data}">
						<image :lazy-load="true" :src="data.data.pic?data.data.pic:'/static/error.jpg'"
							@error="data.data.pic='/static/error.jpg'" mode="" @click="handleToReadPage(data.data.novel_id)"></image>
						<view class="rank"
							:style="{color:data.index==0&&data.childIndex<=3?'orange':'#000'}">
							{{data.childIndex+1+data.index*3}}
						</view>
						<view class="bookName">
							<view class="name">
								{{data.data.title}}
							</view>
							<view class="tag">
								<template v-if="item==1">
									<text>{{getClassfiyName(data.data.classify_id)}}</text>
									<text>{{`· ${data.data.hot}热度`}}</text>
								</template>
								<template v-else-if="item==2">
									<text></text>
									<text>{{data.data.hits?data.data.hits:0}}人气</text>
								</template>
								<template v-else-if="item==3">
									<text></text>
									<text>{{data.data.hits?data.data.hits:0}}人气</text>
								</template>
								<template v-else-if="item==4">
									<text></text>
									<text>{{data.data.rating?data.data.rating:0.0}}</text>
								</template>
								<template v-else-if="item==5">
									<text></text>
									<text>{{data.data.hits?data.data.hits:0}}人气</text>
								</template>
								<template v-else>
									<text></text>
									<text>未知</text>
								</template>
							</view>
						</view>
					</template>
				</hbhSwiperComponent>
			</view>
		</view>
		<view class="tabs">
			<view class="tabs_rankList">
				<view class="tabs_rankList_nav">
					<text>书荒广场</text>
					<view class="tabs_rankList_nav_update">
						<text>更多</text>
						<image src="/static/image/homeImage/homemore.png" mode=""></image>
					</view>
				</view>
				<hbhSwiperComponent nextMargin="100rpx" :listData="bookGradenSquareList">
					<template v-slot:default="{data}">
						<view class="square">
							<text>#</text>
						</view>
						<view class="squareName">
							<text>
								{{data.data.title}}
							</text>
						</view>
					</template>
				</hbhSwiperComponent>
			</view>
		</view>

	</view>
</template>

<style lang="scss" scoped>
	.contain2 {
		flex: 1;
		overflow-y: auto;
		position: relative;

		.freeBox {
			height: 100%;
			display: flex;
			justify-content: space-around;
			background-color: rgba(255, 255, 255, .4);

			&_image {
				width: 220rpx;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			&_info {
				width: calc(100% - 220rpx);
				height: 100%;
				padding: 10rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				&_slogan {
					text-indent: 32rpx;
					font-weight: bold;
					display: -webkit-box;
					height: 96rpx;
					/* 你需要的高度 */
					overflow: hidden;
					/* 隐藏超出容器的部分 */
					font-size: 32rpx;
					line-height: 32rpx;
					-webkit-line-clamp: 3;
					/* 限制显示行数，这里设置为2行 */
					-webkit-box-orient: vertical;
					/* 必须使用这个属性 */
				}

				&_bookName {
					font-size: 32rpx;
					display: -webkit-box;
					font-style: italic;
					height: 32rpx;

					/* 你需要的高度 */
					overflow: hidden;
					/* 隐藏超出容器的部分 */
					font-size: 32rpx;
					line-height: 32rpx;
					-webkit-line-clamp: 1;
					/* 限制显示行数，这里设置为2行 */
					-webkit-box-orient: vertical;

					/* 必须使用这个属性 */
					text:last-child {
						color: red;
						font-weight: bolder;
					}
				}

				&_author {
					font-style: italic;
					font-size: 28rpx;
					display: -webkit-box;
					height: 28rpx;
					/* 你需要的高度 */
					overflow: hidden;
					/* 隐藏超出容器的部分 */
					font-size: 28rpx;
					line-height: 28rpx;
					-webkit-line-clamp: 1;
					/* 限制显示行数，这里设置为2行 */
					-webkit-box-orient: vertical;
					/* 必须使用这个属性 */
				}

				&_price {
					display: flex;
					justify-content: space-between;

					text:first-child {
						text-decoration: line-through;
						font-size: 24rpx;
						color: #55aa7f;
					}

					text:last-child {
						color: #aa5500;
					}
				}

				&_expire {
					display: flex;
					justify-content: flex-end;
					font-size: 22rpx;
					color: #ff0000;
				}
			}
		}

		.recommend {
			height: 80rpx;
			padding-left: 30rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 40rpx;
		}

		.tabs {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.square {
				width: 80rpx;
				height: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				>text {
					color: #fff;
					font-size: 32rpx;
					background-color: #ee6300;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 50%;
					text-align: center;
					margin-right: 10rpx;
				}
			}

			.squareName {
				width: calc(100% - 80rpx);
				height: 100%;
				display: flex;
				align-items: center;

				text {
					white-space: nowrap;
					height: 60rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 32rpx;
					line-height: 60rpx;
				}
			}

			image {
				width: 120rpx;
				height: 100%;
			}

			.rank {
				width: 50rpx;
				height: 100%;
				text-align: center;
				font-size: 34rpx;
			}


			.bookName {
				width: calc(100% - 170rpx);
				height: 100%;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;

				.name {
					display: -webkit-box;
					height: 68rpx;
					/* 你需要的高度 */
					overflow: hidden;
					/* 隐藏超出容器的部分 */
					font-size: 34rpx;
					line-height: 34rpx;
					-webkit-line-clamp: 2;
					/* 限制显示行数，这里设置为2行 */
					-webkit-box-orient: vertical;
					/* 必须使用这个属性 */
				}

				.tag {
					height: 50rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					line-height: 50rpx;
					font-size: 20rpx;

					text {
						color: #ccbea3;
					}

					text:first-child {
						color: #ffaa7f;
					}
				}
			}

			&_rankList {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				&_nav {
					height: 80rpx;

					padding-left: 60rpx;
					position: relative;

					>text {
						line-height: 80rpx;
						color: #000;
						font-weight: bold;
						font-size: 40rpx;
					}

					&_update {
						position: absolute;
						top: calc(50% - 40rpx);
						right: 0;
						height: 80rpx;
						display: flex;
						align-items: center;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							margin-left: 10rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}

				}

				&_box {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15rpx 20rpx;
					box-sizing: border-box;

					&_scroll {
						white-space: nowrap;
						width: 100%;
						height: 80rpx;
						display: flex;
						flex-direction: row;

						&_child {
							width: 160rpx;
							height: 100%;
							display: inline-block;
							margin-right: 10rpx;

							&_meun {
								background: #f0f0f0;
								color: #bebfc1;
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 34rpx;
								border-radius: 10rpx;
							}

							.active {
								background: linear-gradient(to right, #f86d00, #ee6300);
								color: #fff;
							}

						}

						&_child:last-child {
							margin-right: 0rpx;
						}
					}
				}

			}
		}
	}
</style>